<template>
    <view class="page-box">
        <header class="header"></header>
        <section class="section">
            <view class="filter-box row avarage verCenter">
                <view class="item">
                    <picker @change="bindTimeChange" mode="date" fields="month">
                        <view class="row verCenter bar">
                            <view class="uni-input">{{searchParams.create_time || '放款时间'}}</view>
                            <text class="ico"></text>
                        </view>
                    </picker>
                </view>
                <view class="item">
                    <picker @change="bindPickerChange($event,1)" :value="query_range_index" :range="query_range" range-key="name">
                        <view class="row verCenter bar">
                            <view class="uni-input">{{query_range_index == -1 ? '业务层级' : query_range[query_range_index].name}}</view>
                            <text class="ico"></text>
                        </view>
                    </picker>
                </view>
            </view>
            <!-- 列表 -->
            <view class="list" v-if="list.length > 0">
                <scroll-view scroll-y="true" style="height: calc(100vh - 130rpx);" @scrolltolower="lower">
                    <view class="box" v-for="(item,index) in list" :key="index">
                        <view class="top row bothSide verCenter">
                            <view class="left row verCenter">
                                <text class="iconfont icon-riqi"></text>
                                <text class="tt">{{item.customer_name}}</text>
                            </view>
                            <view class="right row verCenter">

                            </view>
                        </view>
                        <view class="wrap row bothSide">
                            <view class="text-item row verCenter">
                                <text class="label">订单编号：</text>
                                <text class="t1">{{item.order_sn}}</text>
                            </view>
                            <view class="text-item row verCenter">
                                <text class="label">业务姓名：</text>
                                <text class="t1 ellipsis">{{item.channel_user_name}}</text>
                                <image v-if="item.level == 1" src="http://www.szxlyc.com/uploads/product/20241111/bf07aa75de15796a583d81015fc6eb6a.png" mode="widthFix" class="level"></image>
                                <image v-if="item.level == 3" src="http://www.szxlyc.com/uploads/product/20241111/12f3d07296f36245187f2ff3bbb3efc3.png" mode="widthFix" class="level"></image>
                                <image v-if="item.level == 4" src="http://www.szxlyc.com/uploads/product/20241111/c3d6b9e0993f66654f54b89f9cd19546.png" mode="widthFix" class="level"></image>
                            </view>
                            <view class="text-item row verCenter">
                                <text class="label">产品名称：</text>
                                <text class="t1">{{item.product_name}}</text>
                            </view>
                            <view class="text-item row verCenter">
                                <text class="label">借款金额：</text>
                                <text class="t2">{{item.lending_amount}}元</text>
                            </view>
                            <view class="text-item row verCenter">
                                <text class="label">借款利率：</text>
                                <text class="t1">{{item.annual_profit_rate}}</text>
                            </view>
                            <view class="text-item row verCenter">
                                <text class="label">借款期数：</text>
                                <text class="t1">{{item.loan_cycle}}</text>
                            </view>
                            <view class="text-item row verCenter" style="margin-bottom: 0;">
                                <text class="label">放款时间：</text>
                                <text class="t1">{{item.create_time}}</text>
                            </view>
                            <view class="text-item row verCenter" style="margin-bottom: 0;">
                                <text class="label">服务费比例：</text>
                                <text class="t1">{{item.commission_ratio}}</text>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <view class="no-data column rowCenter verCenter" v-else>
                <image src="@/static/card.dd09cd89.png" class="pic" mode="aspectFill"></image>
                <text class="tt">暂无业绩信息哦～</text>
            </view>
        </section>
    </view>
</template>

<script>
    import { API } from '@/util/api.js';
    export default {
        data() {
            return {
                hasMoreData: true, //是否分页加载
                query_range: [{ name: '本人', value: 1 }, { name: '下级人员', value: 2 }],
                query_range_index: -1,
                list: [],
                searchParams: {
                    create_time: '', //放款时间
                    query_range: '', //业务层级
                    page: 1,
                    limit: 20
                }
            };
        },
        onLoad() {
            this.getData();
        },
        methods: {
            tab(index) {
                this.curr = index;
            },
            /**
             * 时间选择框
             * @param {Object} e
             * @param {Object} type
             */
            bindTimeChange(e) {
                this.searchParams.create_time = e.detail.value;
                this.resetChange();
                this.getData();
            },
            /**
             * 选择框监听
             * @param {Object} e
             * @param {Object} type
             */
            bindPickerChange(e, type) {
                const value = e.detail.value;
                switch (type) {
                    case 1: // 业务层级  
                        this.query_range_index = value;
                        this.searchParams.query_range = this.query_range[value].value;
                        break;
                }

                // 重置并重新获取数据
                this.resetChange();
                this.getData();
            },
            /**
             * 下拉滚动事件监听
             * @param {Object} e
             */
            lower(e) {
                if (!this.hasMoreData) {
                    return;
                }
                this.searchParams.page++;
                this.getData();
            },
            getData() {
                this.request(API.billAppList, 'GET', this.searchParams, true).then(res => {
                    if (res.code === 0) {
                        if (res.data.list.length > 0) {
                            this.hasMoreData = true;
                            // 格式化创建时间，只保留年月日
                            const formattedList = res.data.list.map(item => ({
                                ...item,
                                create_time: item.create_time.split(' ')[0]
                            }));
                            this.list = this.list.concat(formattedList);
                        } else {
                            this.hasMoreData = false;
                        }
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 重置数据
             */
            resetChange() {
                this.list = [];
                this.searchParams.page = 1;
            }
        }
    };
</script>

<style scoped lang="scss">
    @import '@/assets/css/order/achievement.scss';
</style>